<template>
  <div>
    <div class="criticalCustomerShare" :style="'background-color:'+qRCodeData.color">
      <div>
        <img :src="qRCodeData.banner" style="width:100%;">
        </img>
      </div>
      <div class="content">
        <div class="list">
          <div v-for="(item,index) in shareFigure" :key="index" style="display: flex;">
            <div :style="'background-color:'+item.bgColor" class="icon">
              <div :class="item.url" :style="'color:'+item.imageColor" style="font-size: 25px;"></div>
              <div class="text">{{item.name}}</div>
            </div>
            <div class="iconifnext" v-if="index != shareFigure.length-1">
              <div class="iconfont icon-advertise-next" style="color: #c5c5c5;font-size: 20px;"></div>
              <div class="iconfont icon-advertise-next" style="color: #c5c5c5;margin-left: -10px;font-size: 20px;">
              </div>
            </div>
          </div>
        </div>
        <div class="circle">
          <div style="display: flex;" v-for="(item,index) in 2" :key="index">
            <div :style="'background-color:'+qRCodeData.color+';width: 11px;height: 11px;border-radius: 30px;'"> </div>
            <div
              :style="'background-color:'+qRCodeData.color+';width: 11px;height: 11px;border-radius: 30px;margin-left: 3px;'">
            </div>
          </div>
        </div>
      </div>
      <div class="contentCode">
        <!-- 圆圈和白色直线 -->
        <div class="circle">
          <div style="display: flex;" v-for="(item,index) in 2" :key="index">
            <div :style="'background-color:'+qRCodeData.color+';width: 11px;height: 11px;border-radius: 30px;'"> </div>
            <div
              :style="'background-color:'+qRCodeData.color+';width: 11px;height: 11px;border-radius: 30px;margin-left: 3px;'">
            </div>
          </div>
        </div>
        <div v-for="(item,index) in leftWire" :key="index"
          :style="'width: 7px;height: 32px;background-color: white;position: absolute;top: -22px;border-radius: 30px;left:'+item">
        </div>
        <div v-for="(item,index) in rightWire" :key="index"
          :style="'width: 7px;height: 32px;background-color: white;position: absolute;top: -22px;border-radius: 30px;right:'+item">
        </div>
        <!-- 二维码以及边框-->
        <div class="d-cc-c">
          <div class="dv" :style="'border: 1px solid'+qRCodeData.color">
            <span class="border row1" :style="'border-color:'+qRCodeData.color"></span>
            <span class="border row2" :style="'border-color:'+qRCodeData.color"></span>
            <span class="border col1" :style="'border-color:'+qRCodeData.color"></span>
            <span class="border col2" :style="'border-color:'+qRCodeData.color"></span>
          </div>
          <img :src="qRCodeData.code_url" style="width: 160px;height: 160px;margin-top: -180px;z-index: 99;"/>
        </div>
        <div :style="'color:'+qRCodeData.color" class="text">使用微信扫描二维码</div>
      </div>
    </div>
  </div>
  </div>
  </div>
</template>
<script>
  import QRCode from 'qrcode';
  export default {
    data() {
      return {
        business_id: '', //企业id
        code_id: '', //爆客id
        qRCode: false, //是否显示二维码
        qRCodeData: {}, //二维码页面数据
        leftWire: ['42px', '56px'], //左边竖线偏移距离
        rightWire: ['43px', '57px'], //右边竖线偏移距离
        shareFigure: [{
            name: '识别二维码',
            url: 'iconfont icon-erweima',
            imageColor: '#fe9a03',
            bgColor: '#fff8ed'
          },
          {
            name: '加好友',
            url: 'iconfont icon-fontclass-jiahaoyou',
            imageColor: '#2f9cff',
            bgColor: '#eef8fe'
          },
          {
            name: '获取链接',
            url: 'iconfont icon-ht_operation_copyline',
            imageColor: '#3c6eff',
            bgColor: '#eff3ff'
          },
        ],
      };
    },
    components: {},

    computed: {},

    mounted() {
      this.getData()
    },
    created() {
      if (this.$route.query.code_id) {
        this.code_id = this.$route.query.code_id
      }
      if (this.$route.query.business_id) {
        this.business_id = this.$route.query.business_id
      }
      this.getData()
    },
    methods: {
      //获取扫码首页数据
      getData() {
        $http
          .post("plugin.drainage-code.frontend.controllers.code", {
            business_id: this.business_id,
            code_id: this.code_id
          })
          .then(response => {
            if (response.result == 1) {
              if (!response.data.is_old) {
                this.qRCodeData = response.data
                this.qRCode = true
                this.fun.setWXTitle(response.data.code_name)
              } else {
                window.location.href = response.data.content.link.link
              }
            } else {
              this.$toast(response.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
    }
  };
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .criticalCustomerShare {
    padding-bottom: 20px;
    height: 100vh;
  }

  .criticalCustomerShare .content {
    background-color: white;
    border-radius: 7px;
    margin: 10px;
    padding: 17px;
    height: 120px;
  }

  .criticalCustomerShare .content .list {
    display: flex;
    justify-content: space-between;
  }

  .criticalCustomerShare .content .circle {
    margin-top: 14px;
    padding-left: 23px;
    padding-right: 24px;
  }

  .criticalCustomerShare .content .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 75px;
    height: 75px;
    border-radius: 5px;
  }

  .criticalCustomerShare .content .text {
    margin-top: 5px;
    font-size: 11px;
  }

  .criticalCustomerShare .content .iconif {
    font-size: 20px;
  }

  .criticalCustomerShare .content .iconifnext {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.7rem;
  }

  .criticalCustomerShare .contentCode {
    background-color: white;
    position: relative;
    border-radius: 7px;
    margin: 10px;
    margin-top: 10px;
    height: 300px;
    padding: 1px 10px 10px 10px;
  }


  .criticalCustomerShare .contentCode .dv {
    position: relative;
    margin-top: 35px;
    width: 200px;
    height: 200px;
  }

  .criticalCustomerShare .contentCode .text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    font-size: 12px;
  }

  .circle {
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding-right: 31px;
    padding-left: 30px;
  }

  .border {
    position: absolute;
    padding: 5px;
    border-style: solid;
  }

  .row1 {
    border-width: 3px 0 0 3px;
    height: 25px;
    width: 25px;
    top: -2px;
    left: -2px;
  }

  .row2 {
    border-width: 3px 3px 0 0;
    height: 25px;
    width: 25px;
    top: -2px;
    right: -2px;
  }

  .col1 {
    border-width: 0 0 3px 3px;
    height: 25px;
    width: 25px;
    bottom: -2px;
    left: -2px;
  }

  .col2 {
    border-width: 0 3px 3px 0;
    height: 25px;
    width: 25px;
    bottom: -2px;
    right: -2px;
  }

  .d-cc-c {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>
